<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/lib/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/lib/easyui/1.8.1/themes/default/easyui.css">
    <link rel="stylesheet" href="/lib/easyui/1.8.1/themes/icon.css">
    <script type="text/javascript" src="/lib/easyui/1.8.1/jquery.min.js"></script>
    <script type="text/javascript" src="/lib/easyui/1.8.1/jquery.easyui.min.js"></script>
    <script src="/lib/layuiadmin/layui/layui.js"></script>
</head>
<body>
<h2>Cell Editing in DataGrid</h2>
<p>Click a cell to start editing.</p>
<div style="margin:20px 0;"></div>

<table id="dg" title="Cell Editing in DataGrid" style="width:700px;height:auto"
       data-options="
				iconCls: 'icon-edit',
				singleSelect: true,
				url: '/lib/easyui/1.8.1/demo/datagrid/datagrid_data1.json',
				method:'get'
			">
    <thead>
    <tr>
        <th data-options="field:'itemid',width:80">Item ID</th>
        <th data-options="field:'productid',width:100,editor:'text'">Product</th>
        <th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:2}}">List Price</th>
        <th data-options="field:'unitcost',width:80,align:'right',editor:{type:'numberbox',options:{precision:2}}">Unit Cost</th>
        <th data-options="field:'attr1',width:250,editor:'text'">Attribute</th>
        <th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th>
    </tr>
    </thead>
</table>

<script type="text/javascript">
    $.extend($.fn.datagrid.methods, {
        editCell: function(jq,param){
            return jq.each(function(){
                var opts = $(this).datagrid('options');
                var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
                for(var i=0; i<fields.length; i++){
                    var col = $(this).datagrid('getColumnOption', fields[i]);
                    col.editor1 = col.editor;
                    if (fields[i] != param.field){
                        col.editor = null;
                    }
                }
                $(this).datagrid('beginEdit', param.index);
                var ed = $(this).datagrid('getEditor', param);
                if (ed){
                    if ($(ed.target).hasClass('textbox-f')){
                        $(ed.target).textbox('textbox').focus();
                    } else {
                        $(ed.target).focus();
                    }
                }
                for(var i=0; i<fields.length; i++){
                    var col = $(this).datagrid('getColumnOption', fields[i]);
                    col.editor = col.editor1;
                }
            });
        },
        enableCellEditing: function(jq){
            return jq.each(function(){
                var dg = $(this);
                var opts = dg.datagrid('options');
                opts.oldOnClickCell = opts.onClickCell;
                opts.onClickCell = function(index, field){
                    if (opts.editIndex != undefined){
                        if (dg.datagrid('validateRow', opts.editIndex)){
                            dg.datagrid('endEdit', opts.editIndex);
                            opts.editIndex = undefined;
                        } else {
                            return;
                        }
                    }
                    dg.datagrid('selectRow', index).datagrid('editCell', {
                        index: index,
                        field: field
                    });
                    opts.editIndex = index;
                    opts.oldOnClickCell.call(this, index, field);
                }
            });
        }
    });

    $(function(){
        $('#dg').datagrid().datagrid('enableCellEditing');
    })
</script>
</body>
</html>